<script>
import iot from "/src/js/iot/index.js"

import SensorSaveDialog from "/src/views/manage/iot/device/components/SensorSaveDialog.vue";

export default {
  components: {SensorSaveDialog},
  data() {
    return {
      iot,
      show:false,
      deviceId: "",
      loading: false,
      bodyData:[
        {
          id: "id",
          name: "传感器名称",
          priority: "优先级",
          dataTypeCode: "数据类型编码",
          address: "地址号",
          register: "寄存器号",
          dataPrecision: "数据精度",
          sensorTypeCode: "传感器类型编码",
          unitCode: "单位编码",
          storageStrategy: "存储策略",
          formula: "公式处理(设备->平台)",
          reverseFormula: "公式处理(平台->设备)"
        }

      ]
    }
  },
  mounted() {
  },
  methods:{
    open(deviceId){
      this.show = true;
      this.deviceId = deviceId;
      this.getAll();
    },
    close(){
      this.show = false;
    },
    getAll(){
      this.loading = true;
      this.$kt.request.send({
        uri: "/business-iot-web/admin/iotSensor/getByDeviceId",
        data: {
          deviceId: this.deviceId
        },
        stateSuccess: (res) => {
          this.loading = false;
          this.bodyData = res.data;
          this.$forceUpdate();
        },
        stateFail: (err) => {
          this.$notify({
            title: err.errMsg,
            type: 'error'
          });
          this.show = false;
          this.loading = false;
          this.$forceUpdate();
        }
      })
    },
    toRemove(item) {
      // 是否确定删除,
      this.$confirm(this.$i18n.zhToGlobal('是否确定删除？'), this.$i18n.zhToGlobal('提示'), {
        confirmButtonText: this.$i18n.zhToGlobal('确定'),
        cancelButtonText: this.$i18n.zhToGlobal('取消'),
        type: 'warning',
      }).then(() => {
        this.loading = true;
        this.$kt.request.send({
          uri: "/business-iot-web/admin/iotSensor/remove",
          data: {
            id: item.id
          },
          stateSuccess: (res) => {
            this.getAll();
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
            this.loading = false;
          }
        });
      }).catch(() => {
      });
    }
  }
}
</script>

<template>
  <el-dialog
      draggable
      :title="$i18n.zhToGlobal('传感器列表')"
      v-model="show"
      width="800px"
      style="max-width: 90%">
    <div style="text-align: right">
      <!-- 刷新 -->
      <el-button
          size="small"
          @click="getAll">
        <kt-icon
            color="#666"
            icon="el-icon-refresh"></kt-icon>
      </el-button>
      <!-- 增加 -->
      <el-button size="small"
      @click="$refs.sensorSaveDialog.openNew(deviceId)">
        <kt-icon
            color="#666"
            icon="el-icon-plus"></kt-icon>
      </el-button>
    </div>

    <div style="height: 10px"></div>

    <el-table
        :data="bodyData"
        border
        height="400px"
        v-loading="loading"
        @close="close()"
    >
      <el-table-column
          prop="id"
          :label="$i18n.zhToGlobal('传感器ID')"
          width="150px">
      </el-table-column>

      <el-table-column
          prop="name"
          :label="$i18n.zhToGlobal('传感器名称')"
          width="150px">
      </el-table-column>

      <el-table-column
          prop="priority"
          :label="$i18n.zhToGlobal('优先级')"
          width="100px">
      </el-table-column>

      <el-table-column
          prop="dataTypeCode"
          :label="$i18n.zhToGlobal('数据类型')"
          width="150px">
        <template #default="scope">
          <el-tag>
            {{ iot.getDataTypeLabel(scope.row.dataTypeCode) }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
          prop="address"
          :label="$i18n.zhToGlobal('地址号')"
          width="150px">
      </el-table-column>

      <el-table-column
          prop="register"
          :label="$i18n.zhToGlobal('寄存器号')"
          width="150px">
      </el-table-column>

      <el-table-column
          prop="dataPrecision"
          :label="$i18n.zhToGlobal('数据精度')"
          width="150px">
      </el-table-column>

<!--      <el-table-column-->
<!--          prop="sensorTypeCode"-->
<!--          :label="$i18n.zhToGlobal('传感器类型')"-->
<!--          width="150px">-->
<!--        <template #default="scope">-->
<!--          {{ iot.getSensorTypeLabel(scope.row.sensorTypeCode) }}-->
<!--        </template>-->
<!--      </el-table-column>-->

<!--      <el-table-column-->
<!--          prop="unitCode"-->
<!--          :label="$i18n.zhToGlobal('单位')"-->
<!--          width="150px">-->
<!--        <template #default="scope">-->
<!--          {{ iot.getUnitLabel(scope.row.unitCode) }}-->
<!--        </template>-->
<!--      </el-table-column>-->

      <el-table-column
          prop="storageStrategy"
          :label="$i18n.zhToGlobal('存储策略')"
          width="150px">
      </el-table-column>

      <el-table-column
          prop="formula"
          :label="$i18n.zhToGlobal('公式处理(设备->平台)')"
          width="350px">
      </el-table-column>

      <el-table-column
          prop="reverseFormula"
          :label="$i18n.zhToGlobal('公式处理(平台->设备)')"
          width="350px">
      </el-table-column>


      <el-table-column
          fixed="right"
          :label="$i18n.zhToGlobal('操作')"
          width="100">
        <template #default="scope">
          <div style="text-align: center">
            <div>
              <kt-icon
                  @click="$refs.sensorSaveDialog.open(scope.row)"
                  icon="ant-icon-edit-outlined"
                  color="#000"
                  class="icon-edit icon-btn"
              ></kt-icon>
              <kt-icon
                  @click="toRemove(scope.row)"
                  icon="el-icon-delete"
                  color="#ff0000"
                  style="margin-left: 20px"
                  class="icon-delete icon-btn"
              ></kt-icon>
            </div>
          </div>
        </template>
      </el-table-column>

    </el-table>

  </el-dialog>

  <sensor-save-dialog
  ref="sensorSaveDialog"
  @saveSuccess="getAll"
  ></sensor-save-dialog>

</template>

<style scoped lang="scss">
.icon-btn{
  cursor: pointer;
}
.icon-btn:hover{
  transform: scale(1.1);
}
.icon-btn:active{
  transform: scale(1);
}
</style>